<template>
  <el-container class="height100    domainMainContent containerHeight">
    <chunk_item ref="chunkItem" :headerArr="headerArr" :searchItemArr="searchItemArr" :tableArr="tableArr" :searchChilddata.sync="searchdata"  @onChunkBtnClick="onChunkBtnClick"/>

    <!-- 编辑的时候出现 -->
    <dialog_item :dialogTitle="dialogTitle" @onBtnDialogClick="onBtnDialogClick" :visible.sync="detailVisible">
        <fieldextend_detail 
          ref="editDetail"  
          :detail="content" 
          v-if="detailVisible"
          :mode="mode"
          type="normal"
           @refresh="refresh"
        />
    </dialog_item>
  </el-container>
</template>

<script>
import fieldextend_detail from "@/components/fieldextend_detail.vue";
import chunk_item from "@/components/common/chunk_item.vue"

export default {
  components: { 
    fieldextend_detail,
    chunk_item
  },
  data() {
    return {
      fieldextends: [],
      content: {},
      searchdata:{
        currpage:1,
        pagelines:10,
        data:{
          type:"",
          fortable:"",
          domainid: this.$route.query.domainid,
          belong:"domainid"
        }
      },
      multipleSelection:[],
      mode:"detail",
      tableListConHeight:null,
      detailVisible: false, // 扩展字段
      dialogTitle: '',
      searchItemArr:[],
      fieldArr: [
        { labe: "", value: "" },
        { label: this.$t("string"), value: "string" },
        { label: this.$t("clob"), value: "clob" },
        { label: this.$t("date"), value: "date" },
        { label: this.$t("upload"), value: "upload" },
        { label: this.$t("radio"), value: "radio" },
        { label: this.$t("checkbox"), value: "checkbox" },
        { label: this.$t("select"), value: "select" },
        { label: this.$t("address"), value: "address" },
      ],
      moduleArr:[
        { labe: "", value: "" },
        { label: this.$t("tableUser"), value: "tableUser" },
        { label: this.$t("tableDept"), value: "tableDept" },
        { label: this.$t("tableDomain"), value: "tableDomain" },
      ],
      headerArr:{},
      tableArr:{
        tableColumns:[
              {prop:'name',label:this.$t('owned_field')},
              {prop:'label',label:this.$t('show_label')},
              {prop:'type',label:this.$t('type')},
              {prop:'enabel',label:this.$t('show_list')},
              {prop:'forTable',label:this.$t('owned_module')}
            ]
      }
    };
  },
  provide() {
    return {
      changeMultiSelection: this.changeMultiSelection
    };
  },

  created() {
    this.searchTableData();
    //关于标题的处理
    this.headerArr={iconfont:'icon-shaixuanziduan',content:this.$t('fieldextend'),btnArr:[{type:'primary',name:'new',label:this.$t('new')},{type:'danger',name:'del',label:this.$t('del')}] }
    //在这里对传过去的参数赋值
    this.searchItemArr=[{type:'select',name:'type',placeholder:this.$t('placeholder_select')+this.$t('type'),arr:this.fieldArr},
    {type:'select',name:'fortable',placeholder:this.$t('placeholder_select')+this.$t('owned_module'),arr:this.moduleArr}]
  },
  mounted(){
  },
  methods: {
   changeMultiSelection(data){
      this.multipleSelection=data
    },
   onBtnDialogClick(name){
      if(name=='save'){
        this.onSaveBtnClick()
      }
    },
    onChunkBtnClick({name,data}){
        if(name=='new'){this.onCreateBtnClick()}
        else if(name=='del'){this.onDeleteBtnClick()}
        else if(name=='rowClick'){this.onRowClick(data)}
        else{
          this.searchdata={
            ...this.searchdata,
            ...data
          }
          this.searchTableData()
        }
    },
    onSaveBtnClick(){
      this.$refs.editDetail.onSaveBtnClick('fieldForm')
    },
     refresh(){
      this.detailVisible = false;
      this.searchTableData();
      this.$forceUpdate()
    },
    onCreateBtnClick() {
      this.dialogTitle = this.$t('field_new');
      this.detailVisible = true;
      this.mode="new"
      this.content = {"forTable":"tableUser","enabel":false,"sortNumber":"0"};
    },
    onRowClick(row) {
      this.dialogTitle = this.$t('field_edit');
      this.content = row;
      this.mode="detail";
      this.detailVisible = true;
    },
    searchTableData(){
      this.$api.getFieldExtends(
        this.searchdata,
        {
          onSucess: resp => {
            this.fieldextends = resp.data.data;
            //这里对table的传值赋值
            this.tableArr={
              ...this.tableArr,
              ...this.fieldextends,
              type:'fieldextend',
              delId:'fid',
            }
            this.$set(this.searchdata,'currpage',this.tableArr.pageNo)
            this.$refs.chunkItem.cancelInterval()
          }
        }
      );
    },
    onDeleteBtnClick(){
    this.$api.deleteFieldExtend(this.$route.query.domainid,{
          data:this.multipleSelection
        },{
          onSucess:resp =>{
            if(resp.data.errcode==0){
              this.$refs.chunkItem.clearSelection()//手动清除
              this.$message({
                showClose: true,
                message: this.$t('msg_del_success'),
                type: "success"
              });
              this.searchTableData()
            }else{
              this.$message({
                showClose: true,
                message: resp.data.errmsg,
                type: "error"
              });
            }
          },
          onError:function(){

          }
        })
    },
  }
};
</script>

<style>
</style>